<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>智能切图工具</title>
    <meta name="description" content="智能切图工具" />
    <meta name="keywords" content="智能切图,重构" />
    <link rel="stylesheet" href="./style.css">
</head>

<body>
<article>
    <header>
        <h1>智能切图工具</h1>
        <nav class="js_nav">
            <dl>
                <dd>上传图片</dd>
                <dd>设置切图参数</dd>
                <dd>生成重构稿</dd>
            </dl>
        </nav>
    </header>

    <!--水印-->
    <div class="watermark js_selectfile">点击选择图片<br>或拖放图片到本页面</div>

    <!--工作区-->
    <section class="main js_main">
        <div class="flex js_body">
            <div class="js_panel panel"></div>
            <div class="js_set panel flex-1" style="display:none">
                <div class="js_priview"></div>
                <div class="panel-menu">
                    <div class="js_menu" data-nav="1">
                        <h3>参数设置</h3>
                        <div class="js_item">
                            <label>引擎</label>
                            <div><label><input type="radio" class="js_setting" name="engine" data-name="engine" value="0">JS</label></div>
                            <div><label><input type="radio" class="js_setting" name="engine" data-name="engine" value="1" checked>WebAssembly</label></div>
                        </div>
                        <div class="js_item">
                            <label>页面类型</label>
                            <div><label title="页面铺面全屏，并根据屏幕尺寸进行缩放"><input type="radio" class="js_setting" name="type" data-name="type" value="0" checked>H5</label></div>
                            <div><label title="页面居中展示，两旁留白支持设置背景图和背景色"><input type="radio" class="js_setting" name="type" data-name="type" value="1">PC</label></div>
                        </div>
                        <div class="js_item" data-part="0">
                            <label>缩放类型</label>
                            <label><input type="radio" class="js_setting" name="zoomType" data-name="zoomType" value="0" checked>zoom</label>
                            <label><input type="radio" class="js_setting" name="zoomType" data-name="zoomType" value="1">viewport</label>
                        </div>
                        <div class="js_item" data-part="0">
                            <label>页面宽度</label>
                            <input type="number" class="js_setting" data-name="size" min="320" max="960" step="1" value="640"> px
                            <input type="range" class="js_setting" data-name="size" min="320" max="960" step="1" value="640">
                        </div>
                        <div class="js_item" data-part="1">
                            <label>背景色</label>
                            <input type="text" class="js_setting" data-name="bgcolor" value="" placeholder="默认根据背景图自动获取">
                        </div>
                        <div class="js_item" data-part="1">
                            <label>背景图</label>
                            <input type="file" class="js_setting" data-name="bgimg" accept="image/*">
                            <div><label><input type="checkbox" class="js_setting" data-name="bgtype" value="1">浮动，保持在窗口顶部</label></div>
                            <div><label><input type="checkbox" class="js_setting" data-name="bgtype" value="2">平铺，在垂直方向上重复</label></div>
                            <div><label><input type="checkbox" class="js_setting" data-name="bgtype" value="4">拉伸，根据窗口调整背景图大小</label></div>
                        </div>
                        <div class="js_item">
                            <label>精细度</label>
                            <input type="number" class="js_setting" data-name="unitSize" min="0" max="40" step="1" value="8"> px
                            <input type="range" class="js_setting" data-name="unitSize" min="0" max="40" step="1" value="8">
                        </div>
                        <div class="js_item">
                            <label>背景色阈值</label>
                            <input type="number" class="js_setting" data-name="scope" min="0" max="32" step="1" value="10">
                            <input type="range" class="js_setting" data-name="scope" min="0" max="32" step="1" value="10">
                        </div>
                        <div class="js_item">
                            <label>切片高度</label>
                            <input type="number" class="js_setting" data-name="limit" min="300" max="1600" step="6" value="900"> px
                            <input type="range" class="js_setting" data-name="limit" min="300" max="1600" step="6" value="900">
                        </div>
                        <div class="js_item">
                            <label>图片质量</label>
                            <input type="number" class="js_setting" data-name="quality" min="0.5" max="1" step="0.1" value="0.7">
                            <input type="range" class="js_setting" data-name="quality" min="0.5" max="1" step="0.1" value="0.7">
                        </div>
                        <div class="js_item">
                            <label>拼合小图片</label>
                            <label><input type="radio" class="js_setting" name="combine" data-name="combine" value="1" checked>开启</label>
                            <label><input type="radio" class="js_setting" name="combine" data-name="combine" value="0">关闭</label>
                        </div>
                    </div>
                </div>
                <div class="panel-btn js_panel_btn">
                    <button class="js_reload" type="button">更换图片</button>
                    <button class="js_start" type="button">开始切图</button>
                </div>
            </div>
        </div>
    </section>
</article>

<figure class="result js_result" style="display:none">
    <figcaption>
        <h3>处理结果</h3>
        <a class="result_export js_result_export" title="导出" href="javascript:;">导出结果</a>
        <a class="result_close js_result_close" title="关闭" href="javascript:;">X</a>
        <h4></h4>
    </figcaption>
    <div class="result_body js_result_body">
        <table>
            <thead>
                <th>序号</th>
                <th>宽度</th>
                <th>高度</th>
                <th style="width:200px">位置</th>
                <th style="width:200px">预览图</th>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</figure>

<footer>
    <span class="version">请使用 IE11+/Chrome 浏览器访问该页面</span>
</footer>
<script>if (typeof module === "object") {window.module = module; module = undefined;}</script>

<script src="./jquery.js"></script>
<script src="./loadWebAssembly.js"></script>
<script src="./clayout.js"></script>
<script>if (window.module) module = window.module;</script>
<script src="./app.js"></script>

</body>

</html>